<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增产品信息')" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-product-add">
        <div class="col-xs-6">
            <label class="col-sm-4 control-label is-required">[[#{image}]]：</label>
            <div class="form-group">
                <div class="fileinput fileinput-new" data-provides="fileinput">
                    <div class="fileinput-new thumbnail" style="width: 120px;">
                        <img th:src="@{/img/nopic.jpg}">
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 450px;"></div>
                    <div>
                            <span class="btn btn-white btn-file"><span class="fileinput-new">[[#{select.img}]]</span><span class="fileinput-exists"> [[#{change}]]</span>
                            <input type="file" id="img-file" accept="image/*"></span>
                        <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput"> [[#{clear}]]</a>
                    </div>
                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> [[#{suggest.img.size}]]</span>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">[[#{productName}]]：</label>
                <div class="col-sm-8">
                    <input name="productName" class="form-control" type="text" required>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">[[#{sku}]]：</label>
                <div class="col-sm-8">
                    <input name="productCode" class="form-control" type="text" required>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">[[#{spu}]]：</label>
                <div class="col-sm-8">
                    <input name="styleNo" class="form-control" type="text" required>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">[[#{product.category}]]：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="categoryId" class="form-control" type="hidden">
                        <input id="suggest-category" class="form-control" type="text" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{attributes}]]：</label>
                <div class="col-sm-8">
                    <select name="attributes" class="form-control" th:with="type=${@dict.getType('jt_product_attributes')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{weight}]](KG)：</label>
                <div class="col-sm-8">
                    <input name="weight" class="form-control" type="number">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{unit}]]：</label>
                <div class="col-sm-8">
                    <input name="unit" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">[[#{costPrice}]]：</label>
                <div class="col-sm-8">
                    <input name="cost" class="form-control" type="number" required>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{purchasePrice}]]：</label>
                <div class="col-sm-8">
                    <input name="purchasePrice" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{spec}]]：</label>
                <div class="col-sm-8">
                    <input name="spec" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{placeOfProduction}]]：</label>
                <div class="col-sm-8">
                    <input name="countryOfOrigin" class="form-control" type="text">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{supplier}]]：</label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <input name="supplierId" class="form-control" type="hidden">
                        <input id="suggest-supplier" class="form-control" type="text">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label class="col-sm-4 control-label">[[#{status}]]：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-suggest-js" />
<th:block th:include="include :: jasny-bootstrap-js" />
<script th:inline="javascript">
    var prefix = ctx + "business/product"
    $("#form-product-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            //$.operate.save(prefix + "/add", $('#form-product-add').serialize());

            var formData = $("#form-product-add").serializeObject();
            submitData(prefix + "/add", formData);
        }
    }

    $.fn.serializeObject = function()
    {
        var o = new FormData();
        var formArray = this.serializeArray();
        $.each(formArray, function() {
            o.append(this.name+'', (this.value || ''));
        });
        return o;
    };

    function submitData(url, formData) {
        var file = $('#img-file')[0].files[0];

        if (file == undefined) {
            $.modal.alertWarning(i18n("select.img"));
            return;
        } else {
            var fileSize = parseInt(file.size / 1024); //KB
            if (fileSize > 1024 * 5) {
                var sizeTips = i18n("select.img.size");
                $.modal.alertWarning(sizeTips.replace("{0}", fileSize));
                return;
            }
        }
        formData.append('file', file);

        $.ajax({
            url: url,
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                //提交后不刷新清空；
                if (result && result.code == 0) {
                    $.modal.msgSuccess(result.msg);

                    $.modal.close();

                    activeWindow().$.table.refresh();
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

</script>
<script th:inline="javascript">
    var categorySuggest = $("#suggest-category").bsSuggest({
        url: ctx + "business/category/select/list",
        idField: "categoryId",
        keyField: "categoryNameZh",
        clearable: true,
        ignorecase: true,
        hideOnSelect: true,
        effectiveFields: ["categoryId", "categoryNameZh","categoryNameEn","categoryNameAr"],
        effectiveFieldsAlias: {categoryId: "分类ID", categoryNameZh: "中文", categoryNameEn: "English", categoryNameAr: "Arabic"},
    }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
        console.log('onSetSelectValue: ', selectedData);
        $("input[name='categoryId']").val(selectedRawData.categoryId);
    }).on('onUnsetSelectValue', function (e) {
        //console.log("onUnsetSelectValue=="+e);
        $("input[name='categoryId']").val("");
    });


    var supplierSuggest = $("#suggest-supplier").bsSuggest({
        url: ctx + "business/supplier/select/list",
        idField: "supplierId",
        keyField: "supplierName",
        clearable: true,
        ignorecase: true,
        hideOnSelect: true,
        effectiveFields: ["supplierId", "supplierName","supplierCode"],
        effectiveFieldsAlias: {supplierId: "供应商ID", supplierName: "供应商名称", supplierCode:'供应商编码'},
    }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
        console.log('onSetSelectValue: ', selectedData);
        $("input[name='supplierId']").val(selectedRawData.supplierId);
    }).on('onUnsetSelectValue', function (e) {
        //console.log("onUnsetSelectValue=="+e);
        $("input[name='supplierId']").val("");
    });
</script>

<script th:inline="javascript">
    var ROOT = [[${#servletContext.contextPath}]];
    var LANG_COUNTRY = [[${#locale.language+'_'+#locale.country}]];

    //初始化i18n
    $.i18n.properties({
        path: ROOT + '/i18n/',//这里表示访问路径
        name: 'messages',//文件名开头
        language: LANG_COUNTRY,//文件名语言 例如en_US
        mode: 'map'//默认值
    });

    //i18n函数
    function i18n(msgKey) {
        try {
            return $.i18n.prop(msgKey);
        } catch (e) {
            return msgKey;
        }
    }
</script>
</body>
</html>